<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>初识Vue</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello, {{name.toUpperCase()}}, there are {{age}} years old!</h1>
    </div>
    <!--
        注意：
            1、容器多，实例一：第一个容器生效；
            2、容器一，实例多：第一个实例生效；
            3、{{js表达式}}，data变化，模板中用到的地方会自动更新。
            -->
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
        const vm = new Vue({
            el: '#root' // 用于指定当前vue实例为哪个容器服务，通常为css选择器字符串
            , data: { // data用于存储数据，提供el所指定容器去使用，值暂定为一个对象
                name: 'Vue框架'
                , age: 11
            }
        });
    </script>
</body>

</html>